<template>
    <div    class="cartDetails">
                 <!-- 加入购物车当中的商品列表 -->
           
                <div  class="content" >
                            
                    <van-checkbox-group v-model="result"  @change="groupChangeEvt"  >
                            <div  v-for=" (item,index) in  store.state.cartList" >
                                 <FoodAdd     :item="item"      :showCheckbox = 'true'   :stepperEvt="stepperchangeEvt"   />
                            </div>
                    </van-checkbox-group>
                </div>

                <!-- 结算 -->

                <van-submit-bar class="submit-all"  button-color = "#ffc400"  
                  :price="allPrice * 100" button-text="结算" @submit="onSubmit" v-if="isDelete" >
                    
                    <van-checkbox v-model="checked"   checked-color="#ffc400"   @click="choseAll"   >全选</van-checkbox>
                   
                </van-submit-bar>


                <!-- 删除 -->

                <div class="buy"  v-else>

                    <div  class="left">
                        <van-checkbox v-model="checked"   checked-color="#ffc400"   @click="choseAll"   >全选</van-checkbox>
                    </div>
                    
                    <div  class="delete" @click="deleteEvt" >
                       删除
                    </div>

                </div>





    </div>
</template>

<script>
import { useStore } from 'vuex'
import {reactive,ref,toRefs,onMounted,computed} from 'vue'
import FoodAdd from '../../../components/FoodAdd.vue'
import { Toast } from 'vant'
import emitter from '@/common/js/eventbus'
import    {  useRouter}  from 'vue-router'
    export default {
        components:{
            FoodAdd,
        },
 
        props:['changeShow'],

     setup({changeShow}){
         const   router =  useRouter()
        const  store = useStore()
        let   data = reactive({
            result:[],
            checked:true,
            isDelete:true
        }) 


    
       // 1、在购物车页面中-同步商品个数的改变--子传父的使用

       const  stepperchangeEvt = (value,detail)=>{
              
            store.state.cartList.map((item)=>{
                   
                  if(item.id === detail.name ){
                        
                         item.num = value 
                  }

            })
       }



       // 2、处理-商品默认选中的初始化

       const  init =()=>{
           data.result = store.state.cartList.map((item)=> item.id )
       }
      
       onMounted(() => {
        init()
       })


       // 3、处理全选 与 全不选

     const   choseAll = ()=>{
        if(data.result.length !== store.state.cartList.length){
            init()
        }else{
            data.result = []
        }
     }

     // 4、每个复选框的点击事件触发 与  控制 全选左侧复选框的选中与否

     // vant的复选框组件的 change事件：当绑定值变化时触发的事件
     const  groupChangeEvt =(result)=>{
             console.log(result)
        if(result.length === store.state.cartList.length ){
                 data.checked = true
        }else{
            data.checked = false
        }
     }


     // 5、总价功能  computed 的使用
       const  allPrice = computed(()=>{

        let  countList = store.state.cartList.filter((item)=>{
                  return   data.result.includes(item.id)  

        })
        
        let  sum = 0
        countList.forEach((it)=>{

            sum += it.num * it.price

        })
        return  sum
       })


       // 6、提交订单

       const onSubmit = ()=>{
              if(data.result.length !== 0){
                store.commit('PAY',updata(2))

                router.push({
                    path:'/createorder',
                    query:{
                        list:data.result
                    }
                })
              }else{

                Toast.fail('请选择要结算的商品')
              }
       }

       // 更新数据

       const  updata = (type)=>{
              
           return  store.state.cartList.filter((it)=>{
                 return   type === 2 ? data.result.includes(it.id):  !data.result.includes(it.id)
           })
       }

       // 7、事件总线的使用--监听编辑的点击事件

       emitter.on('edit',()=>{

          data.isDelete =  !data.isDelete


       })

       //  8、点击编辑之后的---删除功能

        const  deleteEvt  =()=>{
                 
                        
            if(data.result.length){

                //更新删除后的购物车里的数据
                store.commit('DELETE',updata(1))

                //  删除后的选中
                data.result = []
             

                // 购物车无数据时进行兜底展示
                if(store.state.cartList.length === 0){
                      
                    // 处理header中-- 编辑与 完成 的切换显示
                  store.commit('EDIT','delete')

                   // 购物车无数据时进行兜底展示
                   changeShow()
                    
                }


            }else{

                Toast.fail('请选择要删除的商品')
            }







        }
        return {
             ...toRefs(data),
             store,
             stepperchangeEvt,
             choseAll,
             groupChangeEvt,
             allPrice,
             onSubmit,
             deleteEvt,
             router
        }
     }



    }
</script>

<style lang="less" scoped>
           .cartDetails{
                      font-size: 14px;
                      flex: 1;
                      position: relative;
                      overflow-x: hidden;

                      /*   overflow-y: auto;
                        //overflow-x:hidden ; */
                      padding: 20px 20px 55px;

                       .submit-all{
                        position: fixed;
                          bottom: 48px;
                       }


                       .buy{
                        position: fixed;
                        bottom: 48px;
                        right: 0;
                        display: flex;
                        justify-content: space-between;
                        width: 100%;
                        background-color: #fff;
                        border-radius: 10px;
                        height: 50px;
                        align-items: center;
                        padding: 0 16px;
                        box-sizing: border-box;

                        .left{
                            display: flex;
                            align-items: center;
                        }

                        .delete{
                            color: #fff;
                            background-color: #ffc400;
                            border-radius: 20px;
                            font-size: 14px;
                            font-weight: 600;
                            width: 110px;
                            height: 40px;
                            text-align: center;
                            line-height: 40px;
                        }


                       }

                       .content{

                        padding: 10px;
                        background-color: #fff;
                        border-radius: 10px;


                       }

           }    
</style>